<!-- 轮播图右侧书本详情信息-->
<template>
    <router-link :to="{path:'',query:{id:id}}">
        <div class="wrapper-right">
            <div class="bookInfo">
                <h3>Z:{{bookMsg.title}}</h3>
            </div>
            <ul>
                <li>作者:{{bookMsg.author}}</li>
                <li>出版社：{{bookMsg.publisiher}}</li>
                <li>出版时间：{{bookMsg.pubTime}}</li>
                <li>装帧：{{bookMsg.binding}}</li>
                <li>开本：{{bookMsg.fofio}}</li>
                <li>品相：{{bookMsg.physiognomy}}</li>
            </ul>
        </div>
    </router-link>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
interface bookInfoType {
    id: number;
    title: string,
    author: string,
    price: number,
    publisiher: string,
    pubTime: string,
    fofio: string,
    physiognomy: string,
    binding: string,
    cover: string,
}
export default defineComponent({
    props: ['bookInfo'],
    data() {
        return {
            bookMsg: {} as unknown as bookInfoType,
            id: 0,
        }
    },
    watch: {
        bookInfo: {
            handler(newValue) {
                console.log(newValue);
                newValue.infoArr.forEach((item: bookInfoType, ind: number) => {
                    if (newValue.value === ind) {
                        this.bookMsg = item;
                    }
                    this.id = this.bookMsg.id;
                });

            },
            immediate: true,
        }


    }
})
</script>

<style lang="scss" scoped>
.wrapper-right {
    width: 461px;
    margin-bottom: 8px;
    color: #000;

    .bookInfo {
        height: 52px;
        font-size: 16px;
        overflow: hidden;
        margin-bottom: 16px;
    }

    ul {
        li {
            height: 18px;
            margin-bottom: 12px;
            font-size: 14px;
        }
    }
}
</style>